<!DOCTYPE html>
<html>

  {% include head.html %}

  <body>

    <div>

      <header class="header-background">

        <div class="clearfix border-bottom-thick header-border">
          <ul class="list-reset right py-1 header-text font-smoothing">
            {% for my_page in site.pages %}
              {% if my_page.title %}
              <li class="inline-block">
                <a class="align-middle link-primary header-link mr-2" href="{{ my_page.url | prepend: site.baseurl }}">{{ my_page.title }}</a>
              </li>
              {% endif %}
            {% endfor %}
          </ul>
        </div>

        <div class="container mx-auto px-2 mb-2 clearfix header-text">
          <h1 class="h0 inline-block col-9 sm-width-full py-4 mt-3 header-title">{{ site.title }}</h1>

          <div class="clearfix mb-4 py-1">
            <div class="col-4 sm-width-full left border-top-thin">
              <div class="table">
                <div class="inline-block mt-3 mr-1">
                  {% include dot-accent.html %}
                </div>
                <div class="inline-block mt-3 mr-1">
                  {% include dot-accent.html %}
                </div>
                <div class="inline-block mt-3">
                  {% include github.html %}
                </div>
              </div>
              <!-- Set site description in config.yml -->
              <p class="h4 lh-condensed font-smoothing mt-2 py-1">{{ site.description }}</p>
            </div>

            <div class="col-4 sm-width-full left border-top-thin mt-3 mt-lg-0 ml-lg-4 table">
                <div class="inline-block mt-3 mr-1">
                  {% include dot.html %}
                </div>
                <div class="inline-block mt-3">
                  {% include {{ site.social_link | default: "twitter" }}.html %}
                </div>
            </div>
          </div>

        </div>
      </header>

      <div class="container mx-auto px-2 py-4">
        {% for post in site.posts %}
          {% include post_block.html %}
        {% endfor %}
      </div>

    </div>

    {% include footer.html %}

  </body>

</html>
